import React from 'react'
import './App.css'
import { Tabbar } from '@nutui/nutui-react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { Cart, Category, Find, Home, User } from '@nutui/icons-react'
export default function App() {
  useEffect(() => {
    switch (location.pathname) {
      case '/app/home':
        setactive(0)
        break;
      case '/app/video':
        setactive(1)
        break;
      case '/app/message':
        setactive(2)
        break;
      case '/app/cart':
        setactive(3)
        break;
      case '/app/my':
        setactive(4)
        break;
    }
  }, [])
  const location = useLocation()
  const navigate = useNavigate()
  const navi = (val) => {
    setactive(val)
    switch (val) {
      case 0:
        navigate('/app/home')
        break;
      case 1:
        navigate('/app/video')
        break;
      case 2:
        navigate('/app/message')
        break;
      case 3:
        navigate('/app/cart')
        break;
      case 4:
        navigate('/app/my')
        break;
    }
  }
  const [active, setactive] = useState(0)
  return (
    <div id='app'>
      <Outlet></Outlet>
      <Tabbar onSwitch={navi} safeArea={true} value={active} fixed>
        <Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
        <Tabbar.Item title="视频" icon={<Find width={20} height={20} />} />
        <Tabbar.Item title="聊天" icon={<Category width={20} height={20} />} />
        <Tabbar.Item title="购物车" icon={<Cart width={20} height={20} />} />
        <Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
      </Tabbar>
    </div>
  )
}
